<template>
<section class="b_promote">
  <div class="l-con">
    <div class="headline clearfix">
      <i class="icon icon_t icon-promote"></i>
      <span class="name">推广</span>
      <a class="fire">一起来跳舞吧，趁我们在校园相遇</a>
    </div>
    <ul class="storey-box clearfix">
      <li class="spread-module">
        <a target="_blank">
          <div class="pic" ref="" @mousemove="progressSide">
            <div class="lazy-img">
              <img src="//i2.hdslb.com/bfs/archive/6b6e87c6732496606bb4286e030e555968a525fc.jpg@320w_200h.webp" alt="【张卫健】万神纪 【童年男神燃向群像】已授权"/>
            </div>
            <div class="cover-preview-module">
              <div class="cover" style="background-image: url('//i3.hdslb.com/bfs/videoshot/18730229.jpg@.webp?vsign=b210c6ae420bf97793bf8b0d75535057d4809918&ver=64353241'); background-position: 0px 0px; background-size: 1600px;">
              </div>
              <div class="progress-bar">
                <span style="width: 0%;"></span>
              </div>
            </div>
            <div class="mask-video"></div>
            <div class="danmu-module">
              <p class="dm" style="left: -72px; transition: left 5s linear;">五宝黑贞路过</p>
              <p class="dm row2" :style="getStyle()">五宝黑贞路过</p>
              <p class="dm">五宝黑贞路过</p>
              <p class="dm row2">五宝黑贞路过</p>
              <p class="dm">五宝黑贞路过</p>
              <p class="dm row2">五宝黑贞路过</p>
            </div>
            <span class="dur">05:08</span>
            <div class="watch-later-trigger w-later"></div>
          </div>
          <p class="text" title="【张卫健】万神纪 【童年男神燃向群像】已授权">【张卫健】万神纪 【童年男神燃向群像】已授权</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="r-con">
    <div class="online">
      <a target="_blank" title="在线观看：258943">在线观看：258943</a>
      <em></em>
      <a target="_blank" title="最新投稿：3637">最新投稿：3637</a>
    </div>
    <div class="banner">
      <a target="_blank">
        <div class="lazy-img">
          <img src="//i0.hdslb.com/bfs/archive/585783417d7956bd143c7fef5a50c2a5deb9b494.jpg@520w_300h.webp"/>
        </div>
      </a>
    </div>
  </div>
</section>
</template>

<script>
export default {
  name: 'b_promote',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  methods: {
    progressSide () {},
    random (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    getStyle () {
      const o = {};
      const rand = this.random(0, 160);
      o.left = rand + 'px';
      o.transition = 'left 5s linear';
      return o;
    }
  }
};
</script>

<style lang="stylus" scoped>

.b_promote
  .icon
    display inline-block
    background-image url(../../../static/images/icons.d895b84.png)
  .l-con
    float left
    width 900px
    .headline
      padding 0 0 15px
      .icon
        width 40px
        height 40px
        margin-right 10px
        vertical-align middle
        float left
        margin-top -10px
      .icon-promote
        background-position -141px -75px
      .name
        font-size 24px
        line-height 24px
        font-weight 400
        margin-right 20px
        float left
      .fire
        margin-top 7px
        margin-left 10px
        padding-right 10px
        color #6d757a
        float left
    .storey-box
      height 168px
      overflow hidden
      .spread-module
        position relative
        width 160px
        height 148px
        font-size 12px
        overflow hidden
        float left
        margin 0 20px 20px 0
        .pic
          position relative
          width 160px
          height 100px
          display block
          overflow hidden
          text-align center
          border-radius 4px
          .mask-video
            opacity 0
            position absolute
            top 0
            left 0
            width 100%
            height 100%
            background rgba(0,0,0,.2)
            transition opacity .3s
          .dur
            position absolute
            bottom 2px
            left 6px
            color #fff
            height 12px
            line-height 12px
            padding 0 5px 1px 0
            transition all .3s
            opacity 0
          &:hover
            .w-later
              display block
            .mask-video,
            .dur,
            .cover-preview-module,
            .danmu-module
              opacity 1
        .text
          padding-top 8px
          height 40px
          line-height 20px
          transition all .2s linear
          color #222
          word-break break-all
          overflow hidden
          text-align left
          font-weight 400
          &:hover
            color #00a1d6
          
  .r-con
    float right
    width 260px
    .online
      position relative
      height 34px
      line-height 34px
      padding 0 10px
      border-radius 4px
      text-align center
      background #e5e9ef
      white-space nowrap
      a
        color #6d757a
      em
        display inline-block
        border-left 1px solid #b8c0cc
        height 10px
        line-height 10px
        margin 12px 15px 0
        vertical-align top
    .banner
      margin-top 10px
      border-radius 4px
      overflow hidden
      width 260px
      height 150px
      position relative
      a
        display block
.cover-preview-module
  opacity 0
  position absolute
  left 0
  top 0
  width 100%
  height 100%
  transition opacity .3s
  .cover
    position absolute
    left 0
    top 7px
    height 98px
    width 100%
    margin-top 2px
  .progress-bar
    position absolute
    left 0
    top 0
    width 100%
    height 10px
    border-width 4px 8px
    border-style solid
    border-color #000
    background #444
    box-sizing border-box
    span
      display block
      background #fff
      height 2px
.danmu-module
  position absolute
  left 0
  top 0
  width 100%
  height 100%
  opacity 0
  transition all .3s
  .dm
    position absolute
    color #fff
    left 100%
    top 8px
    white-space pre
    text-shadow 1px 1px 2px #001
    &.row2
      top 25px
.watch-later-trigger
  display none
  width 22px
  height 22px
  position absolute
  right 6px
  bottom 4px
  cursor pointer
  background url(../../assets/images/watchlater.png)
.lazy-img
  width 100%
  height 100%
  display inline-block
  background: url(../../../static/images/img_loading.a351656.png) 50% no-repeat;
  img
    width 100%
    height 100%
    display block
@media screen and (max-width: 1400px)
  .b_promote
    .l-con
      width 720px
</style>
